<template>
  <ToolbarItemContainer ref="container" :iconFile="workOrderSearchIcon" title="本群工单" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'" @click="openList">
  </ToolbarItemContainer>
  <el-dialog v-model="dialogVisible" title="本群工单" width="1000">
    <el-form label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="工单名/客户名：">
            <el-input v-model="params.keywords" style="width: 200px" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单类型：">
            <el-select v-model="params.pid" placeholder="请选择" style="width: 200px">
              <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单状态：">
            <el-select v-model="params.status" placeholder="请选择" style="width: 200px">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="日期选择：">
            <el-date-picker v-model="during" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="getDate" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin-left: 20px;" @click="handleSearch">查询</el-button>
          <el-button @click="handleClear">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" style="width: 100%" border>
      <el-table-column prop="title" label="工单名称" align="center" />
      <el-table-column prop="pid_name" label="工单类型" width="120" align="center" />
      <el-table-column prop="creator_name" label="创建人" width="120" align="center" />
      <el-table-column prop="status" label="状态" width="90" align="center">
        <template #default="{ row }">
          <el-tag type="primary" v-if="row.status == 1">初审中</el-tag>
          <el-tag type="success" v-if="row.status == 2">已完结</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180" align="center" />
      <el-table-column label="操作" width="190" align="center" fixed="right">
        <template #default="{ row }">
          <!-- <el-button type="primary" size="small" @click="sendGroupOrder(row)">发送本群</el-button> -->
          <el-button type="success" size="small" @click="openDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: center; margin-top: 10px;">
      <el-pagination background layout="prev, pager, next" :total="total" />
    </div>
  </el-dialog>
  <WorkOrderDetail :visible="isVisible" :woId="currnetId" @closeDialog="closeDialog" />
</template>
<script setup lang="ts">
import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUIChatService,
  IConversationModel,
  SendMessageOptions
} from '@tencentcloud/chat-uikit-engine';
import { ref, onMounted } from '../../../../adapter-vue';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import workOrderSearchIconLight from '../../../../assets/icon/workOrderSearch-light.svg';
import workOrderSearchIconDark from '../../../../assets/icon/workOrderSearch-dark.svg';
import { isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';
import { GetWorkOrderList, getWorkOrderCate } from '@/api';
import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
import WorkOrderDetail from '../../../common/WorkOrder/index'

const workOrderSearchIcon = TUIChatConfig.getTheme() === 'dark' ? workOrderSearchIconDark : workOrderSearchIconLight;

const emits = defineEmits(['update:showWorkOrder']);
const container = ref();
const currentConversation = ref<IConversationModel>();
const dialogVisible = ref(false);
const params = ref<any>({
  group_id: '',
  keywords: '',
  status: -1,
  pid: 0,
  cate_id: '',
  start_time: '',
  end_time: '',
  page: 1,
  user_type: 1
});
const list = ref([]);
const total = ref(0);
const cateList = ref([{
  id: 0,
  name: '全部'
}]);
const statusList = ref([{
  id: -1,
  name: '全部'
}, {
  id: 1,
  name: '初审中'
}, {
  id: 2,
  name: '已完结'
}]);
const during = ref([]);
const isVisible = ref(false);
const currnetId = ref('')

onMounted(() => {
  getWorkOrderCate({
    pid: 0 
  }).then(res => {
    res.data.forEach((item: any) => {
      cateList.value.push(item)
    })
  })
})

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

function openList() {
  dialogVisible.value = true
  params.value.group_id = currentConversation.value.groupProfile.groupID
  getList()
}

function getDate() {
  params.value.start_time = during.value[0]
  params.value.end_time = during.value[1]
}

function getList(){
  GetWorkOrderList(params.value).then(res => {
    list.value = res.data
    total.value = res.count
  })
}

function handleSearch(){
  params.value.page = 1
  list.value = []
  getList()
}

function handleClear(){
  params.value.keywords = ''
  params.value.status = -1
  params.value.pid = ''
  params.value.cate_id = ''
  params.value.start_time = ''
  params.value.end_time = ''
  params.value.page = 1
  during.value = []
  getList()
}

function sendGroupOrder(row: any){
  const obj = {
    businessID: 'workOrder',
    type: 'workOrder',
    id: row.id,
    status: row.status,
    title: row.title,
    group_id: row.group_id,
    cate_id: row.cate_id,
    plan_time: row.plan_time,
    cate_name: row.pid_name,
  };
  const payload = {
    data: JSON.stringify(obj),
    description: '',
    extension: '',
  };
  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID
      || currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload,
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  };
  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
    conversation: currentConversation.value,
    payload: options.payload,
    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
  };
  const sendMessageOptions: SendMessageOptions = {
    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
  };
  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
}

function openDetail(row: any) {
  isVisible.value = true
  currnetId.value = row.id
}

function closeDialog() {
  isVisible.value = false
  currnetId.value = ''
}
</script>
